/***
 * 获取画布上的图案的上下左右边界。
 * @param canvas {HTMLCanvasElement} 需要查询的画布
 * @returns {{top: number, left: number, width: number, height: number}}
 */
function getCanvasDataRect(canvas) {
    let imgData = canvas.getContext("2d").getImageData(
        0, 0, canvas.width, canvas.height
    );
    let data = imgData.data;
    let top = -1, left = -1, right = 0, end = 0;
    for (let i = 0; i < data.length; i += 4) {
        let line = Math.floor(i / 4 / canvas.width);
        if (data[i] !== 0 || data[i + 1] !== 0 || data[i + 2] !== 0 || data[i + 3] !== 0) {
            end = line + 1;
            if (top === -1) {
                top = line;
            }
            let temp = i / 4 - line * canvas.width;
            if (left === -1) {
                left = temp;
            } else if (temp < left) {
                left = temp;
            }
            if (temp > right) {
                right = temp;
            }
        }
    }
    return {left: left, top: top, width: right - left + 1, height: end - top};
}

function drawColorText(context, string, color, fill) {
    context.shadowBlur = 5;
    context.shadowColor = "#00ffff";
    context.fillStyle = color;
    context.strokeStyle = color;
    // 按照指定方式绘制：
    if (fill) {
        context.fillText(string, 0, 0);
    } else {
        context.strokeText(string, 0, 0);
    }
}

function getStringData(string, fontFamily, fontSize, color, fill) {
    let canvas = document.createElement("canvas");
    canvas.width = string.length * fontSize;
    canvas.height = fontSize * 2;
    canvas.setAttribute("style", "position: fixed;");
    document.body.append(canvas);
    let context = canvas.getContext("2d");
    context.font = fontSize + "px " + fontFamily;
    context.textBaseline = "top";
    drawColorText(context, string, color, fill);
    let rect = getCanvasDataRect(canvas);
    let data = context.getImageData(rect.left, rect.top, rect.width, rect.height);
    canvas.remove();
    return {
        data: data, left: rect.left, top: rect.top, width: rect.width, height: rect.height
    };
}

let cvs = document.querySelector("#canvas");
let ctx = cvs.getContext("2d");
cvs.width = 600;
cvs.height = 500;

function drawText(string, fontSize, fontFamily, x, y, color, fill) {
    let rectH = getStringData("0", fontFamily, fontSize, color, fill);
    let ox = 0, width = [0];
    for (let i = 0; i < string.length; i++) {
        let rect = getStringData(string[i], fontFamily, fontSize, color, fill);
        width.push(rect.width);
        let oy = rect.height < rectH.height ? (rectH.height - rect.height) / 2 : 0;
        if (rect.width < rectH.width) {
            if (width[i] === 0) {
                ox = (rectH.width - rect.width) / 2;
                ctx.putImageData(rect.data, x + ox, y + oy);
                ox += (rectH.width - rect.width) / 2;
            } else {
                ox = ox + width[i] + (rectH.width - rect.width) / 2;
                ctx.putImageData(rect.data, x + ox, y + oy);
                ox += (rectH.width - rect.width) / 2;
            }
        } else {
            ox += width[i];
            ctx.putImageData(rect.data, x + ox, y + oy);
        }
    }
}


function showTime(){
    let time = new Date();
    let hh = time.getHours(), mm = time.getMinutes(), ss = time.getSeconds(),
    yy = time.getFullYear(), mo = time.getMonth(), dd = time.getDay();
    hh = hh < 10 ? "0"+hh : hh;
    mm = mm < 10 ? "0"+mm : mm;
    ss = ss < 10 ? "0"+ss : ss;
    mo = mo < 10 ? "0"+mo : mo;
    dd = dd < 10 ? "0"+dd : dd;
    yy = yy%100;
    let text = hh+":"+mm+":"+ss;
    let year = yy + "-"+mo+"-"+dd;
    let height = getStringData("0", "Arial", 40, "red", 1).height+4;
    drawText(text, 40, "Arial", 0 ,0, "red", 1);
    drawText(year, 40, "Arial", 0 ,height, "red", 1);
}

showTime();